<template>
  <div class="table-containner">
    <div class="tableTop">
      <el-form :inline="true"  class="demo-form-inline"  size="mini" >
        <el-form-item label="协议库管理" style="margin-right: 40px">
        </el-form-item>
        <el-form-item class="normalLabel">
          <el-input v-model="searchValue" size="mini" suffix-icon="el-icon-search">
          </el-input>
        </el-form-item>
        <el-form-item  style="margin-right: 6px">
          <el-button type="primary" @click="equipSearch()">查询</el-button>
          <!--<el-button type="info" >高级查询</el-button>-->
        </el-form-item>
        <el-form-item style="float: right">
          <!--<el-button type="primary" >新增协议库</el-button>-->
          <!--<el-button class="theButton" type="info">批量删除</el-button>-->
          <!--<el-button class="theButton" type="primary"  >导出</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <div class="pagination-container footerPage">
      <el-pagination
        @current-change="CurrentChange"
        @size-change="SizeChange"
        :page-sizes="[5, 10, 20, 50]"
        background layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <div  class="configtableList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        style="width: 100%; max-height: 720px; overflow-y: auto"
        :height="720"
        :show-overflow-tooltip="true"
        :header-cell-style="{background:'#D8DEE8',height: '20px',padding:'5px 0px'}"
      >
        <!--<span>@select="toggleRowSelection"-->
        <!--@select-all="toggleRowSelectionAll"</span>-->
        <el-table-column
          type="selection"
          width="40px"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :show-overflow-tooltip="true"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="165px"
        >
          <template slot-scope="scope">
            <el-button @click.native.prevent="detailDialog(scope.$index, scope.row)" class="tableIcon" title="查看" type="text">
              <i class="lookDetail"></i>
            </el-button>
            <el-button @click.native.prevent="redactDialog(scope.$index, scope.row)" class="tableIcon" title="编辑" type="text">
              <i class="redactDetail"></i>
            </el-button>
            <div class="equipDelete">
              <el-button  type="text" class="" title="删除" @click.native.prevent="deleteEquip(scope.$index, scope.row)">
                <i class="deleteEquip"></i>
              </el-button>
            </div>
            <div class="fileRedact">
              <el-button style="padding: 0 1px; border: 2px solid #0072F3; border-radius: 0px" @click.native.prevent="replaceDialog(scope.$index, scope.row)" type="text" title="更换点表" >更换点表</el-button>
            </div>
            <orgdelete></orgdelete>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <protocol-detail v-bind:userIndex="userIndex" v-bind:userRow="userRow" v-if="detailDialogShow" @giveFalse="detailDialogReturn"></protocol-detail>
    <protocol-redact v-bind:userIndex="userIndex" v-bind:userRow="userRow" v-if="redactDialogShow" @giveFalse="redactDialogReturn"></protocol-redact>
    <protocol-replace v-bind:userIndex="userIndex" v-bind:userRow="userRow" v-if="replaceDialogShow" @giveFalse="replaceDialogReturn"></protocol-replace>
  </div>
</template>
<script>
  import axios from 'axios'
  import orgdelete from '@/views/managementSide/mSiteAdmin/components/delete'
  import wraningDelete from '@/assets/components/wraningDelete.png'
  import protocolDetail from './protocoldetail.vue'
  import protocolRedact from './protocolRedact.vue'
  import protocolReplace from './protocolReplace.vue'
  import bus from './bus.js'

  export default {
    components: {
      orgdelete,
      protocolDetail,
      protocolRedact,
      protocolReplace
    },
    data() {
      return {
        wraningDelete,
        // 查询条件
        cols: [
          { prop: 'resource_id', label: 'ID', width: '150px' },
          { prop: 'catagory', label: '分类', width: '160px', sortable: true },
          { prop: 'brand', label: '品牌' },
          { prop: 'name', label: '型号', width: '140px' },
          { prop: 'param', label: '通讯参数', width: '220px' },
          { prop: 'type', label: '通讯类型', width: '100px' },
          { prop: 'table_name', label: '点表名称', width: '250px' }
        ],
        tableData: [],
        indexMethod: '',
        total: 0,
        // 换页
        siteListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        // 查询值
        searchValue: '',
        // 父组件传参
        userIndex: '',
        userRow: '',
        // 弹窗
        detailDialogShow: false,
        redactDialogShow: false,
        replaceDialogShow: false,
        // 总览接口
        protocolDataTable: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'projects_device_table_getall',
          id: '',
          page: {
            page_size: '10',
            page_number: '1'
          }
        },
        // 删除
        delSubmitData: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'projects_type_del',
          del: []
        },
        // 查询
        protocolSearch: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'projects_device_query',
          id: '',
          page: {
            page_size: '10',
            page_number: '1'
          }
        }
      }
    },
    mounted() {
      this.protocolData()
      bus.$on('Table', () => {
        var vm = this
        console.log('父组件接受')
        vm.protocolData()
      })
      bus.$on('giveResource', (data) => {
        this.resourceProtocolData(data)
      })
    },
    methods: {
      // 父组件传值
      // 点击控制dialog布尔值
      detailDialog(index, rows) {
        this.userIndex = index
        this.userRow = rows
        this.detailDialogShow = !this.detailDialogShow
      },
      redactDialog(index, rows) {
        this.userIndex = index
        this.userRow = rows
        this.redactDialogShow = !this.redactDialogShow
      },
      replaceDialog(index, rows) {
        this.userIndex = index
        this.userRow = rows
        this.replaceDialogShow = !this.replaceDialogShow
      },
      // 父组件接收值
      detailDialogReturn(data) {
        this.detailDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        this.protocolData()
        console.log('11')
        console.log(data)
      },
      redactDialogReturn(data) {
        this.redactDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        setTimeout(() => {
          this.protocolData()
        }, 100)
        console.log('11')
        console.log(data)
      },
      replaceDialogReturn(data) {
        this.replaceDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        setTimeout(() => {
          this.protocolData()
        }, 100)
        console.log('11')
        console.log(data)
      },
      getreload(data) {
        console.log(11111, data)
      },
      toJSON() {},
      // 换页
      handleSizeChange(val) {
        this.siteListQuery.limit = val
        this.getprotocolDataTable()
      },
      handleCurrentChange(val) {
        this.siteListQuery.page = val
        this.tableData()
      },
      // 查询条件
      equipSearch() {
        this.protocolSearch.id = this.searchValue
        axios.post('/protocol', this.protocolSearch, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.tableData = res.data.data
          this.total = parseInt(res.data.page.total)
          // console.log(this.tableData)
          console.log(res)
          console.log(this.total)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 总览接口
      protocolData() {
        axios.post('/protocol', this.protocolDataTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.tableData = res.data.data
          this.total = parseInt(res.data.page.total)
          console.log(this.tableData)
          // console.log(res)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 点击后总览接口
      resourceProtocolData(val) {
        this.protocolDataTable.id = val
        axios.post('/protocol', this.protocolDataTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.tableData = res.data.data
          this.total = parseInt(res.data.page.total)
          console.log(this.tableData)
          // console.log(res)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 单个删除
      deleteEquip(index, rows) {
        console.log(rows)
        var idstr = ''
        idstr = rows.resource_id
        this.delSubmitData.del.push(idstr)
        console.log(this.delSubmitData.del)
        this.$confirm('确认删除协议库？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log()
          axios.post('/protocol', this.delSubmitData, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.delSubmitData.del = []
            this.protocolData()
          })
            .catch((error) => {
              console.log(error)
              this.$message({
                type: 'error',
                message: error.data.errmsg
              })
            })
          this.protocolData()
        }).catch(() => {
        })
      },
      // 多个删除
      // 选择设备
      //      toggleRowSelection(row) {
      //        this.webGates = []
      //        console.log(row)
      //        for (var i = 0; i < row.length; i++) {
      //          this.webGates.push(row[i].asset_no)
      //          // console.log(this.webGates)
      //        }
      //        this.delSubmitData.data.asset_no = this.webGates
      //        // console.log(this.delSubmitData.data.asset_no)
      //      },
      //      toggleRowSelectionAll(row) {
      //        this.webGates = []
      //        console.log(row)
      //        for (var i = 0; i < row.length; i++) {
      //          this.webGates.push(row[i].asset_no)
      //          // console.log(this.webGates)
      //        }
      //        this.delSubmitData.data.asset_no = this.webGates
      //        // console.log(this.delSubmitData.data.asset_no)
      //      },
      //      deletemore() {
      //        if (this.delSubmitData.data.asset_no.length === 0) {
      //          this.$message.error('请勾选要删除的序号!')
      //        } else {
      //          this.$confirm('确认删除协议库？', '提示', {
      //            cancelButtonClass: 'userCancel',
      //            confirmButtonClass: 'userConfirm',
      //            confirmButtonText: '确定',
      //            cancelButtonText: '取消',
      //            type: 'warning'
      //          }).then(() => {
      //            axios.post('/asset', this.delSubmitData, {
      //              headers: {
      //                'Content-Type': 'application/x-www-form-urlencoded'
      //              }
      //            }).then((res) => {
      //              console.log(res)
      //              this.$message({
      //                type: 'success',
      //                message: '删除成功'
      //              })
      //              this.delSubmitData.data.asset_no = []
      //              this.webGateData()
      //            }).catch((error) => {
      //              console.log(error)
      //              this.$message({
      //                type: 'error',
      //                message: error.data.errmsg
      //              })
      //            })
      //          }).catch(() => {
      //            this.$message({
      //              type: 'info',
      //              message: '已取消删除'
      //            })
      //          })
      //        }
      //      },
      // 当前页
      CurrentChange(val) {
        this.protocolDataTable.page.page_number = (val) + ''
        this.protocolData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.protocolDataTable.page.page_size = (pageSize) + ''
        this.protocolData()
      }
    }
  }
</script>
<style scoped>
  .table-containner {
    min-width: 1400px;
    min-height: 500px;
  }
  .tableTop {
    width: 100%;
    min-height: 50px;
    background-color: #F0F3F5;
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(105,114,126,1);
    line-height: 20px;
    padding: 12px 20px 0px 20px;
  }
  .configtableList{
    width: 100%;
    min-height:20vw;

  }
  .footerPage{
    float: right;
    right: -10px;
    position: relative;
  }
  /**********搜索栏样式修改***********/
  /deep/ .el-form-item--mini.el-form-item{
    margin-bottom: 12px;
  }
  /deep/ .theButton {
    margin-left: 5px !important;
  }
  /deep/ .normalLabel .el-form-item__label{
    font-weight: normal;
    color: #69727E;
  }
  /***********************操作列样式**************************/
  /deep/ .tableIcon {
    padding: 0px;
    font-size: 20px;
    font-weight: 500;
  }
  /deep/ .el-button+.el-button{
    margin-left: 3px;
  }
  .deleteEquip{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../../../../assets/reports/delete_normal.png');
  }
  .deleteEquip:hover{
    background-image: url('../../../../assets/reports/delete_hover.png');
  }
  .redactDetail{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../../../../assets/reports/redact_normal.png');
  }
  .redactDetail:hover{
    background-image: url('../../../../assets/reports/redact_hover.png');
  }
  .lookDetail{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('../../../../assets/reports/detail_normal.png');
  }
  .lookDetail:hover{
    background-image: url('../../../../assets/reports/detail_hover.png');
  }
  /deep/ .equipDelete {
    display: inline-block;
  }
  .fileRedact{
    display: inline-block;
    vertical-align: text-bottom;
  }
  /deep/ .el-button--text {
    color: #0072F3;
  }
  /deep/ .el-button--text:hover, .el-button--text:focus{
    color: #0072F3;
  }
  /deep/ .overviewDropdown {
    width:74px;
    margin-left: 5px;
    top: -4px;
    cursor: pointer;
  }
  /deep/ .el-dropdown-link {
    font-size: 10px;
    padding:2px;
    color: #0072F3;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 12px;
    width: 98px;
    color: #e0e0e0;
  }
  /deep/ .associatedbuttom {
    text-align: left;
    color: #323842;
    border: none;
    margin-left: 5px;
    padding: 10px;
    height: 24px;
    width: 88px;
    font-size: 12px;
  }
  /deep/ .associatedbuttom:hover {
    background: #c7f9e6;
    color: #2bbc8c;
  }
  /**********表格**********/
  /deep/ .el-table td{
    padding: 3px 0 !important;
  }
</style>
